<template>
  <div class="custom-body" :style="borderStyle">
    <div class="body-custom" :style="bodyStyle">
      <div v-if="showHeader" class="custom-header">
        <div class="header-body">
          <div v-if="temp.sfsxtb" class="header-icon">
            <i :class="temp.tb" />
          </div>
          <div v-else class="header-line" />
          <div class="header-title">
            <div
              v-for="(item, index) in columns"
              :key="'item-' + index"
              class="custom-header-li"
              :class="index === active ? 'header-active' : ''"
              @click="headerClick(item, index)"
            >
              <span>{{ item.label }}</span>
            </div>
          </div>
          <div
            v-if="isMore"
            class="header-icon more"
            @click="callTabsBack"
          >
            更多
          </div>
        </div>
      </div>
      <div class="custom-content">
        <component
          :is="template"
          v-if="template"
          :show-header="false"
          :temp="column"
          @fetch-data="callBack"
          @fetch-entity="callBackEntity"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { mobile } from '@/mixins/mobile'
export default {
  name: 'PortalAppTabsTempV2',
  mixins: [mobile({ tabs: 'tabs' })]
}
</script>

<style scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.body-custom {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
}
.custom-header {
  width: 100%;
  height: 50px;
  flex: 0 1 auto;
  padding: 0 10px;
  box-sizing: border-box;
  line-height: 50px;
  cursor: pointer;
}
.header-body {
  width: 100%;
  height: 51px;
  display: flex;
  flex-flow: row nowrap;
}
.header-icon {
  width: 20px;
  height: 50px;
  flex: 0 1 auto;
  text-align: center;
  color: #409eff;
  font-size: 1.1rem;
}
.header-icon.more {
  width: 50px;
  font-size: 0.9rem;
}
.header-title {
  height: 50px;
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
  font-size: 0.9rem;
}
.custom-header-li {
  padding: 0 10px;
  box-sizing: border-box;
  flex: 0 1 auto;
  height: 50px;
  position: relative;
}
.custom-header-l span {
  display: block;
  height: 100%;
  position: relative;
}
.custom-header-li:hover span {
  color: #409eff;
}
.header-active {
  color: #409eff;
  font-weight: bolder;
}
.header-active::after {
  content: "";
  height: 2px;
  left: 5px;
  right: 5px;
  bottom: 0px;
  position: absolute;
  background-color: #409eff;
}
.custom-content {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
